<template>
    <div class="layout-container">
      <div class="main-card flexible-card">
        <div class="card-header">灵活理财</div>
        <div class="main-content">
          <p class="rate">1.719%</p>
          <p>近七日年化</p>
          <div class="tags">
            <span>中低风险</span>
            <span>每日开放</span>
          </div>
          <a href="#" class="info-button">了解更多 ></a>
        </div>
      </div>
      <div class="side-cards">
        <div class="side-card">
          <div class="card-header">稳健理财</div>
          <div class="main-content">
            <p class="rate">2.40% - 3.20%</p>
            <div class="tags">
              <span>中低风险</span>
              <span>每日开放</span>
            </div>
          </div>
        </div>
        <div class="side-card">
          <div class="card-header">优选基金</div>
          <div class="main-content">
            <p class="rate">10.36%</p>
            <div class="tags">
              <span>T+3赎回</span>
              <span>高风险</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <div class="wealth-card">
      <div class="content">
        <h3>点击获取我的财富“通”关图</h3>
        <p>一键获取资产配置报告</p>
        <button class="action-button">点击查看</button>
      </div>
    </div>
  
    <div class="image-container">
      <div class="image">
        <img src="./assets_page3/youxiajiao.png" alt="财富图" />
        <img src="./assets_page3/youxiajiao (2).png" alt="财富图" />
      </div>
      <div class="bottom-left-image">
        <img src="./assets_page3/zuoxiajiao.png" alt="新图片" class="small-image positioned-image" />
      </div>
    </div>
  
    <!-- 插入新的热点推荐卡片 -->
    <div class="layout-container">
      <div class="main-card">
        <div class="card-header">热点推荐</div>
        <div class="list">
          <div class="item">
            <span class="item-number">1</span>历史上首个“特大地震...<span class="item-label label-explosion">爆</span>
          </div>
          <div class="item">
            <span class="item-number">2</span>巴黎奥运会落幕式...<span class="item-label label-hot">热</span>
          </div>
          <div class="item">
            <span class="item-number">3</span>养老新选择！找不到...<span class="item-label label-new">新</span>
          </div>
        </div>
        <a href="#" class="link">更多热点 ></a>
      </div>
  
      <div class="side-cards">
        <div class="side-card">
          <div class="card-header">教你理财轻松入门</div>
          <div class="main-content">
            <p class="rate">1.719%</p>
            <p>近七日年化</p>
            <div class="tags">
              <span>中低风险</span>
              <span>每日开放</span>
            </div>
            <a href="#" class="info-button">了解更多 ></a>
          </div>
        </div>
        <div class="side-card">
          <div class="card-header">智慧城市科技金融</div>
          <div class="main-content">
            <p class="rate">2.40% - 3.20%</p>
            <p>每月可赎 中低风险</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    errorCaptured(err, vm, info) {
      console.error(`Error: ${err.toString()}\nInfo: ${info}`);
      return false;
    }
  };
  </script>
  
  <style scoped>
  .wealth-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, #f7f0c3, #fce1c8);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
  }
  
  .content {
    padding: 20px;
    flex: 1;
  }
  
  .content h3 {
    margin: 0 0 10px 0;
    font-size: 1.5em;
  }
  
  .content p {
    margin: 0 0 20px 0;
    font-size: 1em;
  }
  
  .action-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .image-container {
    display: flex;
    flex-direction: column;
    position: relative;
    height:70px;
  }
  
  .image {
    display: flex;
    flex-direction: column;
    height:70px;
  }
  /* 财富通关图卡片右下角图片 */
 .image img {
  width: 100px;
  height: auto;
  margin-bottom: 100px;
  position: absolute; /* 添加定位属性 */
  right: 0;           /* 定位到右侧 */
  bottom: 0;          /* 定位到底部 */
}

  .bottom-left-image {
    position: absolute;
    bottom: 100px;
    left: 10px;
  }
  
  .small-image.positioned-image {
    width: 50px;
    height: 10;
  }
  
  .layout-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f8f8f8;
  }
  
  .main-card {
    background-color: #fffbe6;
    border-radius: 10px;
    padding: 20px;
    flex: 1;
    margin-right: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .side-cards {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .side-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .main-content {
    text-align: center;
  }
  
  .rate {
    font-size: 2em;
    color: #e74c3c;
    margin: 10px 0;
  }
  
  .tags span {
    display: inline-block;
    background-color: #f1c40f;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px;
  }
  
  .info-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px;
    background-color: #babdc0;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
  }
  
  .list {
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
  }
  
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  
  .item-number {
    color: #e74c3c;
    margin-right: 5px;
  }
  
  .item-label {
    color: #fff;
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 0.8em;
    margin-left: auto;
  }
  
  .label-explosion, .label-hot {
    background-color: #e74c3c;
  }
  
  .label-new {
    background-color: #3498db;
  }
  
  .link {
    text-align: right;
    color: #3498db;
    text-decoration: none;
    display: inline-block;
  }
  </style>
  